<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			.wrap {
				width: 1000px;
				overflow: hidden;
				margin: 0 auto;
			}

			.item {
				float: left;
				width: 200px;
				height: 460px;
			}

			.item img {
				/* width: 200px; */
				height: 460px;
			}
		</style>
	</head>
	<body>
		<ul class="wrap">
			<li class="item">
				<img src="img/m1.jpg" alt="" />
			</li>
			<li class="item">
				<img src="img/m2.jpg" alt="" />
			</li>
			<li class="item">
				<img src="img/m3.jpg" alt="" />
			</li>
			<li class="item">
				<img src="img/m4.jpg" alt="" />
			</li>
			<li class="item">
				<img src="img/m5.jpg" alt="" />
			</li>
		</ul>
		<script src="js/jquery-3.4.1.min.js"></script>

		<script>
			// 思考:   that  是什么
			// currentLi 又是什么
			// 清除定时器的目的

			// 防抖的思想  /节流
			// 延迟hover 的效果
			var $currentLi; // 思考  保存的是展开的那张 li
			// 停留 超过200ms  在执行展开
			var timer = null;
			$("li").mouseenter(function () {
				// $(this).css("width", "600px");
				// $(this).siblings().css("width", "100px");
				// 先变窄 在变宽
				
				// console.log(this);
				var that = this; // 保存this 的指向

				// 清除之前的定时器

				clearTimeout(timer);
				timer = setTimeout(function () {
					// console.log(this); // window对象
					// 回调函数当中 慎用this (指向会变)
					$currentLi = $(that);
					$(that).siblings().animate(
						{
							width: 100,
						},
						200,
						"swing",
					);
					$(that).animate(
						{
							width: 600,
						},
						200,
						"swing",
					);
				}, 200);
			});
			$(".wrap").mouseleave(function () {
				// $("li").css("width", "200px");
				// 先让 变宽的那张  还原,再还原它的兄弟
				// 如何知道谁是展开的那张
				clearTimeout(timer);
				$currentLi.animate(
					{
						width: 200,
					},
					200,
					"swing",
				);
				$currentLi.siblings().animate(
					{
						width: 200,
					},
					200,
					"swing",
				);
			});
		</script>
	</body>
</html>
